<template>
  <view class="classify">
    <view class="search-input">
      <search-input></search-input>
    </view>
    <view class="content">
      <view class="scroll-menu-warp">
        <scroll-view scroll-y="true" class="scroll-menu">
          <view class="scroll-menu-item"
            :class="{ active: activeIndex === index }"
            v-for="(item, index) in menuList" @click="changeIndex(index)"
            :key="index">
            {{ item }}
          </view>
        </scroll-view>
      </view>
      <view class="scroll-goods-warp">
        <scroll-view scroll-y="true" class="scroll-goods">
          <view class="scroll-goods-item"
            v-for="item in categories[activeIndex].children" :key="item.cat_id">
            <view class="goods_title">
              <text class="delimiter">/</text>
              <text class="title">{{ item.cat_name }}</text>
              <text class="delimiter">/</text>
            </view>
            <view class="goods_list">
              <navigator v-for="good in item.children" :key="good.cat_id"
                :url="'/pages/goods_list/goods_list?cid=' + good.cat_id">
                <image mode="widthFix" :src="good.cat_icon"></image>
                <view class="goods_name">{{ good.cat_name }}</view>
              </navigator>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from "vuex" //引入mapState
  import {
    setStorage
  } from "../../../api/Storage.js"
  export default {
    data() {
      return {
        categories: [],
        menuList: [],
        activeIndex: 0,
      }
    },

    onLoad() {
      if (this.StoreCategories) {
        let nowTime = Date.now()
        if (nowTime - this.menuTime > 10 * 60 * 1000) {
          this.getCategories()
        } else {
          this.categories = this.StoreCategories
          this.setClassify(this.StoreCategories)
        }
      } else {
        this.getCategories()
      }
    },
    methods: {
      getCategories() {
        this.$http({
          url: "/categories",
          method: "GET",
          data: {},
        }).then((res) => {
          setStorage("categories", res)
          setStorage("setTime", Date.now())
          this.$store.commit("setMenuTime", Date.now())
          this.setClassify(res)
        })
      },
      // 处理数据
      setClassify(res) {
        this.categories = res
        this.menuList = res.map((v) => v.cat_name)
      },
      //点击左侧菜单
      changeIndex(index) {
        this.activeIndex = index
      },
    },
    // computed: mapState({
    //   // 从state中拿到数据 箭头函数可使代码更简练
    //   StoreCategories: (state) => state.StoreCategories,
    //   menuTime: (state) => state.menuTime,
    // }),
    computed: {
      StoreCategories() {
        return this.$store.state.StoreCategories
      },
      menuTime() {
        return this.$store.state.menuTime
      }
    }
  }
</script>

<style lang="scss">
  .classify {
    width: 100vw;
    height: 100vh;
    /* #ifdef H5 */
    height: calc(100vh - 190upx);

    /* #endif */
    .search-input {
      width: 100%;
      height: 90upx;
    }

    .content {
      display: flex;
      // height: ~'calc( 100vh - 90upx )';
      height: calc(100vh - 90upx);
      /* #ifdef H5 */
      height: calc(100vh - 270upx);

      /* #endif */
      .scroll-menu-warp {
        flex: 2;

        .scroll-menu {
          width: 100%;
          height: 100%;
          overflow: hidden;

          .scroll-menu-item {
            width: 100%;
            height: 80upx;
            display: flex;
            align-items: center;
            justify-content: center;
            border-left: 10upx solid #F7F7F7;
          }

          .active {
            color: #eb4450;
            border-left: 10upx solid #eb4450;
          }
        }
      }

      .scroll-goods-warp {
        flex: 5;

        .scroll-goods {
          width: 100%;
          height: 100%;
          overflow: hidden;

          .scroll-goods-item {
            .goods_title {
              height: 80upx;
              display: flex;
              justify-content: center;
              align-items: center;

              .delimiter {
                color: #ccc;
                padding: 0 10upx;
              }

              .title {}
            }

            .goods_list {
              display: flex;
              flex-wrap: wrap;

              navigator {
                width: 33.33%;
                height: 140upx;
                // text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                margin-bottom: 20upx;

                image {
                  width: 50%;
                }

                .goods_name {
                  margin-top: 12upx;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
